<!DOCTYPE html>
<html lang="cs">
  <head>
    <meta charset="utf-8">
    <title>sCanvas – JavaScriptová knihovna pro vykreslování na HTML5 Canvas</title>
    <!-- Mobile viewport optimized -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <!-- Le styles -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/black-tie/jquery-ui.css" rel="stylesheet">
    <link href="css/jquery.tocify.css" rel="stylesheet">
    <link href="css/prettify.css" type="text/css" rel="stylesheet" />
    <link href="css/styles.css" type="text/css" rel="stylesheet" />

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <style>

@media (max-width: 767px) {
    #toc {
        position: relative;
        width: 100%;
        margin: 0px 0px 20px 0px;
    }
}
    </style>
  </head>

  <body>
    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container-fluid">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="#">sCanvas</a>

          <div class="nav-collapse">
            <ul class="nav">
              <li><a href="index.html">Úvod</a></li>
              <li><a href="core.html">Jádro</a></li>
              <li><a href="objects.html">Objekty</a></li>
              <li class="active"><a href="animations.html">Animace</a></li>
              <li><a href="events.html">Události</a></li>
              <li><a href="groups.html">Skupiny</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="container-fluid">
      <div class="row-fluid">
        <div class="span3 tocify">
          <div id="toc">
          </div><!--/.well -->
        </div><!--/span-->
        <div class="span9">
          <div class="hero-unit">
            <h1>sCanvas – Události</h1>
          </div>
		
		<div class="method well">
			<h2>obj.animate()</h2>
			<div class="syntax">
				<strong>obj.animate(atributy [, duration [, easing [, complete ]]])</strong>
				<div>
					<span>atributy – object</span>
					<p>Objekt atributů k animování.</p>
				</div>
				<div>
					<span>duration – number, string</span>
					<p>Trvání animace.</p>
				</div>
				<div>
					<span>easing – string</span>
					<p>Průběh animace v čase.</p>
				</div>
				<div>
					<span>complete – function()</span>
					<p>Funkce vykonaná na konci aminace.</p>
				</div>
			</div>
			<div class="syntax">
				<strong>obj.animate(atributy, nastavení)</strong>
				<div>
					<span>atributy – object</span>
					<p>Objekt atributů k animování.</p>
				</div>
				<div>
					<span>nastavení – object</span>
					<p>Objekt nastavení animace.</p>
					<div>
						<span>duration – number, string</span>
						<p>Trvání animace.</p>
					</div>
					<div>
						<span>easing – string</span>
						<p>Průběh animace v čase.</p>
					</div>
					<div>
						<span>complete – function()</span>
						<p>Funkce vykonaná na konci aminace.</p>
					</div>
					<div>
						<span>repeat – number</span>
						<p>Počet opakování animace.</p>
					</div>
				</div>
			</div>
			<p>Přidá animaci do animační fronty objektu. Pokud je tato fronta prázdná, je ihned spuštěno vykonání animace. Jinak animace čeká, až doběhnou animace, které jsou ve frontě před ní.</p>
			<p>Přijímá objekt obsahující páry název animovaného atributu: požadovaná hodnota atributu na konci animace. Ostatní argumenty jsou nepovinné, přičemž defaultní nastavení trvání animace je na 400 ms a easing na "linear".</p>
			<p>Trvání animace lze nastavit buď jako počet milisekund, nebo pomocí klíčových slova "slow" a "fast", reprezentující 600 respektive 200 milisekund.</p>
			<p>Easing v současné době nemá žádný význam a nijak neovlivňuje průběh animace.</p>
			<p>Repeat určuje, kolikrát bude animace opakována. Přijímá i hodnotu <code>Infinity</code> reprezentující nekonečnou animaci. Funkce <code>complete</code> je vykonána při každém skončení animace.</p>
		</div>
		
		<div class="method well">
			<h2>obj.clearQueue()</h2>
			<div class="syntax">
				<strong>obj.clearQueue()</strong>
			</div>
			<p>Odstraňuje z fronty všechny animace následující po v součastnosti probíhající. Pokud má tato více opakování, jsou vymazány.</p>
		</div>
		
		<div class="method well">
			<h2>obj.delay()</h2>
			<div class="syntax">
				<strong>obj.delay(délka)</strong>
				<div>
					<span>délka – number, string</span>
					<p>Délka zpoždění.</p>
				</div>
			</div>
			<p>Přidá do animační fronty zpoždění odpovídající předané délce v milisekundách. Jako u <code>animate()</code> je možno použít i klíčová slova "slow" a "fast".</p>
		</div>
		
		<div class="method well">
			<h2>obj.finish()</h2>
			<div class="syntax">
				<strong>obj.finish()</strong>
			</div>
			<p>Odstraní z fronty všechny animace a okamžitě objektu nastaví atributy, které by měl na konci, pokud by tyto animace proběhly normálně.</p>
		</div>
		
		<div class="method well">
			<h2>obj.isPaused()</h2>
			<div class="syntax">
				<strong>obj.isPaused()</strong>
			</div>
			<p>Vrací <code>true</code> pokud na objektu byly pozastaveny animace metodou <code>pause()</code>.</p>
			<p>Pokud je animační fronta prázdná, vrací <code>false</code>.</p>
		</div>
		
		<div class="method well">
			<h2>obj.pause()</h2>
			<div class="syntax">
				<strong>obj.pause()</strong>
			</div>
			<p>Pozastavuje probíhající animaci. Pro pokračování slouží <code>play()</code>.</p>
		</div>
		
		<div class="method well">
			<h2>obj.play()</h2>
			<div class="syntax">
				<strong>obj.play()</strong>
			</div>
			<p>Spustí pokračování animace pozastavené metodou <code>pause()</code>.</p>
		</div>
		
		<div class="method well">
			<h2>obj.queue()</h2>
			<div class="syntax">
				<strong>obj.queue(fn)</strong>
				<div>
					<span>fn – function()</span>
					<p>Funkce k vykonání.</p>
				</div>
			</div>
			<p>Přidá do animační fronty objektu funkci, která bude vykonána ihned, jakmile na ni přijde řada. Následně je spuštěna další animace ve frontě.</p>
		</div>
		
		<div class="method well">
			<h2>obj.stop()</h2>
			<div class="syntax">
				<strong>obj.stop([ vymazat [, konec ]])</strong>
				<div>
					<span>vymazat – boolean</span>
					<p>Určuje, zda má být vymazán obsah animační fronty.</p>
				</div>
				<div>
					<span>konec – boolean</span>
					<p>Určuje, zda mají být nastaveny atributy požadované na konci animace.</p>
				</div>
			</div>
			<p>Zastavuje současnou animaci a spouští další animace ve frontě. Pokud měla současná animace více opakování, animace pokračuje dalším opakováním.</p>
			<p>Defaultně mají oba argumenty hodnotu <code>false</code>.</p>
			<p>Pokud je vymazat <code>true</code>, budou z fronty odstraněny všechny animace, případně odstraněny všechny opakování současné animace.</p>
			<p>V případě, že je konec nastaveno na <code>true</code>, jsou objektu okamžitě nastaveny atributy, které by měl na konci animace. Zároveň je vykonána funkce complete.</p>
		</div>
		
      </div><!--/row-->
	  
      <div class="navbar" style="margin:0 auto;width:45%;">
        <p>
            Copyright &copy; 2013 Daniel Bielczyk
        </p>
      </div>
    </div><!--/.fluid-container-->
  </div>
    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery-ui.custom.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/history.js"></script>
    <script src="js/jquery.tocify.min.js"></script>
    <script src="js/prettify.js"></script>
    <script src="js/githubrepo.js"></script>
    <script>
        $(function() {

            $("#toc").tocify({ selectors: "h2, h3, h4", scrollTo: 60, highlightOffset: 60, extendPage: true });

            prettyPrint();

            $(".optionName").popover({ trigger: "hover" });

            $("a[href='#']").click(function(event) {
 
                event.preventDefault();

            });

        });
    </script>
  </body>
</html>